<template>
    <div>
        <el-row :gutter='20'>
            <el-col :span='8'>
                <el-card shadow='hover' class='mgb20' style='height:252px;'>
                    <div class='user-info'>
                        <img src='../../assets/img/img.png' class='user-avator' alt />
                        <div class='user-info-cont'>
                            <div class='user-info-name'>{{ name }}</div>
                            <div>{{ role }}</div>
                        </div>
                    </div>
                    <div class='user-info-list'>
                        上次登录时间：
                        <span>
                            {{ date }}
                        </span>
                    </div>
                    <div class='user-info-list'>
                        上次登录地点：
                        <span>浙江 杭州</span>
                    </div>
                </el-card>
                <el-card shadow='hover' style='height:252px;'>
                    <template #header>
                        <div class='clearfix'>
                            <span>个人战绩</span>
                        </div>
                    </template>
                    <div v-for='(item, index) in progressList' class='item-view' :data=progressList>
                        <el-progress :text-inside='true'
                                     :stroke-width='23'
                                     :percentage='setItemProgress(item)'
                                     v-if='!isNaN(parseInt((item.completeNum/item.planNum)*100))'
                                     :color='setItemStatus(item)' :format='setItemText(item)'
                                     :class='showProgressColor((item.completeNum/item.planNum)*100)'>
                        </el-progress>
                    </div>
                </el-card>
            </el-col>
            <el-col :span='16'>
                <el-row :gutter='20' class='mgb20'>
                    <el-col :span='8'>
                        <el-card shadow='hover' :body-style="{ padding: '0px' }">
                            <div class='grid-content grid-con-3'>
                                <i class='el-icon-sort grid-con-icon'></i>
                                <div class='grid-cont-right'>
                                    <div class='grid-num'>4</div>
                                    <div>中国排名</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span='8'>
                        <el-card shadow='hover' :body-style="{ padding: '0px' }">
                            <div class='grid-content grid-con-2'>
                                <i class='el-icon-success grid-con-icon'></i>
                                <div class='grid-cont-right'>
                                    <div class='grid-num'>114514</div>
                                    <div>过题数</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span='8'>
                        <el-card shadow='hover' :body-style="{ padding: '0px' }">
                            <div class='grid-content grid-con-1'>
                                <i class='el-icon-error grid-con-icon'></i>
                                <div class='grid-cont-right'>
                                    <div class='grid-num'>321</div>
                                    <div>尚未通过的题</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
                <el-row :gutter='20' class='mgb20' style='height:403px'>
                    <el-col :span='12'>
                        <el-card shadow='hover' :body-style="{ padding: '0px' }">
                            <template #header>
                                <div class='clearfix'>
                                    <span>最近比赛</span>
                                    <router-link to='/contest'>
                                        <el-button style='float: right; padding: 3px 0' type='text'>查看更多</el-button>
                                    </router-link>
                                </div>
                            </template>
                            <recent-contest></recent-contest>
                        </el-card>
                    </el-col>
                    <el-col :span='12'>
                        <el-card shadow='hover' :body-style="{ padding: '0px' }">
                            <template #header>
                                <div class='clearfix'>
                                    <span>最近提交</span>
                                    <router-link to='/status'>
                                        <el-button style='float: right; padding: 3px 0' type='text'>查看更多</el-button>
                                    </router-link>
                                </div>
                            </template>
                            <recent-status></recent-status>
                        </el-card>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
        <el-row :gutter='20'>
            <el-col :span='12'>
                <el-card shadow='hover'>
                    <schart ref='line' class='schart' canvasId='line' :options='chart2'></schart>
                </el-card>
            </el-col>
            <el-col :span='12'>
                <el-card shadow='hover'>
                    <!--                    <codeview class="schart"></codeview>-->
                    <schart ref='pie' class='schart' canvasId='pie' :options='chart1'></schart>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>


<script>
import Schart from 'vue-schart';
import RecentContest from '@/components/common/RecentContest';
import RecentStatus from '@/components/common/RecentStatus';

export default {
    name: 'dashboard',
    data() {
        return {
            name: localStorage.getItem('ms_username'),
            todoList: [
                {
                    title: 'cf2500分题目一题',

                    status: false
                },
                {
                    title: '看队友的可持久化trie树代码',
                    status: false
                },
                {
                    title: '可持久化trie树学习',
                    status: false
                },
                {
                    title: '可持久化并查集例题（今日头条I题）',
                    status: false
                },
                {
                    title: '摸鱼',
                    status: true
                },
                {
                    title: '牛客赛补题',
                    status: true
                }
            ],
            chart1: {
                type: 'pie',
                title: {
                    text: 'Problem Solved Last Week'
                },
                xRorate: 25,
                legend: {
                    position: 'left'
                },
                labels: ['Accepted', 'Wrong Answer', 'Compilation Error', 'Time Limit Exceed', 'Memory Limit Exceed'],
                datasets: [
                    {
                        data: [234, 278, 270, 190, 230]
                    }
                ]
            },
            chart2: {
                type: 'line',
                title: {
                    text: 'Rating Change (2021)'
                },
                labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                datasets: [
                    {
                        data: [74, 118, 200, 235, 90]
                    }
                ]
            },
            progressList: [
                {
                    name: 'A级题目',
                    completeNum: 650,   // 计划数量
                    planNum: 800  // 完成数量
                },
                {
                    name: 'B级题目',
                    completeNum: 219,
                    planNum: 400
                },
                {
                    name: 'C级题目',
                    completeNum: 51,
                    planNum: 200
                },
                {
                    name: 'D级题目',
                    completeNum: 21,
                    planNum: 100
                }
            ],
            date: new Date()
        };
    },
    components: {
        Schart,
        RecentContest,
        RecentStatus
    },
    computed: {
        role() {
            return this.name === 'admin' ? '超级管理员' : '普通用户';
        }
    },

    methods: {
        changeDate() {
            const now = new Date().getTime();
            this.data.forEach((item, index) => {
                const date = new Date(now - (6 - index) * 86400000);
                item.name = `${date.getFullYear()}/${date.getMonth() +
                1}/${date.getDate()}`;
            });
        },
        // 设置进度
        setItemProgress(data) {
            if (data.completeNum > data.planNum) {
                return 100;
            } else {
                return parseInt((data.completeNum / data.planNum).toFixed(1) * 100);
            }
        },
        showProgressColor: function(val) {
            if (val < 25) {
                return 'el-bg-inner-running';
            } else if (val < 50) {
                return 'el-bg-inner-error';
            } else if (val < 75) {
                return 'el-bg-inner-done';
            }
        },

// 自定义进度条文字
        setItemText(row) {
            return () => {
                return row.name + '： ' + row.completeNum + '/' + row.planNum;
            };
        },

// 设置当前进度条状态，显示不同颜色
        setItemStatus(data) {
            if (data.completeNum > data.planNum) {
                return 'red';
            } else if (data.completeNum === data.planNum) {
                return '#59b401';
            } else {
                if (data.completeNum * 4 < data.planNum) {
                    return '#0153aa';
                } else if (data.completeNum * 2 < data.planNum) {
                    return '#0171aa';
                } else if (data.completeNum * 4 < data.planNum * 3) {
                    return '#00a7ad';
                } else {
                    return '#01b40a';
                }
            }
        }
    },
    mounted() {
        let that = this;
        this.timer = setInterval(function() {
            that.date = new Date().toLocaleString();
        });
    },
    beforeDestroy: function() {
        if (this.timer) {
            clearInterval(this.timer);
        }
    }
};
</script>

<style scoped>
.el-row {
    margin-bottom: 20px;
}

.grid-content {
    display: flex;
    align-items: center;
    height: 100px;
}

.grid-cont-right {
    flex: 1;
    text-align: center;
    font-size: 14px;
    color: #999;
}

.grid-num {
    font-size: 30px;
    font-weight: bold;
}

.grid-con-icon {
    font-size: 50px;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    color: #fff;
}

.grid-con-1 .grid-con-icon {
    background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
    background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-3 .grid-con-icon {
    background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
    color: rgb(242, 94, 67);
}

.user-info {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 2px solid #ccc;
    margin-bottom: 20px;
}

.user-avator {
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

.user-info-cont {
    padding-left: 50px;
    flex: 1;
    font-size: 14px;
    color: #999;
}

.user-info-cont div:first-child {
    font-size: 30px;
    color: #222;
}

.user-info-list {
    font-size: 14px;
    color: #999;
    line-height: 25px;
}

.user-info-list span {
    margin-left: 70px;
}

.mgb20 {
    margin-bottom: 20px;
}

.todo-item {
    font-size: 14px;
}

.todo-item-del {
    text-decoration: line-through;
    color: #999;
}

.schart {
    width: 100%;
    height: 300px;
}


.content-view {
    height: calc(100vh - 84px);
    background-color: #FFFFFF;
    padding: 20px;
}

.item-view {
    margin-bottom: 1rem;
}

/* 渐变进度条 */
.el-bg-inner-running .el-progress-bar__inner {
    background-color: unset;
    background-image: linear-gradient(to right, #3587d8, #6855ff);
}

.el-bg-inner-error .el-progress-bar__inner {
    background-image: linear-gradient(to right, #3587d8, #fb3a7e);
}

.el-bg-inner-done .el-progress-bar__inner {
    background-image: linear-gradient(to right, #3587d8, #53ff54);
}
</style>
